<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>数据采集</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	<link rel="stylesheet" href="../../admin/css/other/console1.css" />
	<!-- 主 题 更 换 -->
	<style id="pearadmin-bg-color"></style>
</head>

<body class="pear-container">
	<div>
		<div class="layui-row layui-col-space10">
			<div class="layui-col-md3">
				<button type="button" id="btn" class="layui-btn layui-btn-lg  layui-btn-fluid">开始预测</button>
			</div>
			<div class="layui-col-md9">
				<div class="layui-card">
					<div class="layui-card-body" id="pro">
						<b style="color: dimgray;">当前共有32条数据，其中32条数据未预测</b>
						<!-- <div class="layui-progress layui-progress-big" lay-filter="demo">
								<div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
							</div> -->
					</div>
				</div>
			</div>

		</div>
		<div class="layui-row layui-col-space10">
			<div class="layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header"><b style="color: dimgray;">预测历史</b></div>
					<div class="layui-card-body">
						<ul class="list" style="height: 470px;">
							<li class="list-item"><span class="title"><span class="count pear-text">2021-4-7</span>
									<span style="float: right;">预测<span
											class="count pear-text">5632</span>条</span></span></li>
							<li class="list-item"><span class="title"><span class="count pear-text">2021-3-18</span>
									<span style="float: right;">预测<span
											class="count pear-text">1576</span>条</span></span></li>
							<li class="list-item"><span class="title"><span class="count pear-text">2021-1-20</span>
									<span style="float: right;">预测<span
											class="count pear-text">7542</span>条</span></span></li>
					</div>
				</div>
			</div>
			<div class="layui-col-md9">
				<div class="layui-card">
					<div class="layui-card-body">
						<div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
							<div id="echarts-records" style="background-color:#ffffff;min-height:500px;padding: 10px">
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
	<!--</div>-->
	<script src="../../component/layui/layui.js"></script>
	<script src="../../component/pear/pear.js"></script>
	<script>
		layui.use(['layer', 'echarts', 'element', 'count', 'topBar', 'element'], function () {
			var $ = layui.jquery,
				layer = layui.layer,
				element = layui.element,
				count = layui.count,
				echarts = layui.echarts;
			var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');


			all = $.get("http://localhost/LSTM_car_comment/public/web/console/prid", function (data) {
				console.log(data);
				$("#pro").html("<b style='color: dimgray;'>当前共有" + data[0] + "条数据，其中" + data[1] +
					"条数据未预测</b>");
			});

			var option = {
				title: {
					text: '预测结果一览'
				},
				tooltip: {
					trigger: 'axis'
				},
				xAxis: [{
					type: 'category',
					data: ['油耗', '空间', '动力', '操控', '外观', '内饰', '舒适性'],
					axisLine: {
						lineStyle: {
							color: "#999"
						}
					}
				}],
				yAxis: [{
					name: '数量',
					type: 'value',
					splitNumber: 4,
					splitLine: {
						lineStyle: {
							type: 'dashed',
							color: '#DDD'
						}
					},
					axisLine: {
						show: false,
						lineStyle: {
							color: "#333"
						},
					},
					nameTextStyle: {
						color: "#999"
					},
					splitArea: {
						show: false
					}
				}],
				series: [{
					name: '数量',
					type: 'bar',
					barWidth: 30,
					data: [23, 60, 20, 36, 23, 85, 40],
					color: ['#10ac84'],
					smooth: true
				}]
			};
			echartsRecords.setOption(option);
			//点击模拟加载
			$("#btn").click(function () {
				$("#pro").html(
					'<div class="layui-progress layui-progress-big" lay-filter="demo"><div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div></div>'
				);
				//进度条
				var n = 0,
					timer = setInterval(function () {
						n = n + Math.random() * 10 | 0;
						if (n > 100) {
							n = 100;
							clearInterval(timer);
							$("#pro").html('<b style="color: dimgray;">预测完成</br>');
						}
						element.progress('demo', n + '%');
					}, 300 + Math.random() * 1000);

				//预测
				$.get("http://localhost/lSTM_car_comment/LSTMPredict/predict.py", function (d) {
					console.log(d);
					var dd = Array(7);
					var da = 0;
					var n = "";
					for (var i = 0; i < d.length; i++) {
						ch = d.charAt(i);
						if (ch == " ") {
							dd[da] = n;
							n = "";
							da++;
							continue;
						} else {
							n = n + ch;
						}
					}
					console.log(dd);
					echartsRecords.setOption({
						series: [{
							data: dd,

						}]
					});
				});
			});


			window.onresize = function () {
				echartsRecords.resize();
			}

		});
	</script>
</body>

</html>